<template>
  <div class="orderSettlement">
    <div class="main">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span class="headerTitle">金额信息</span>
        </div>
        <div class="content">
          <p>实际金额:{{ form.real_money }}元</p>
          <p v-if="Number(form.first_payment) > 0">第一次支付金额:{{ form.first_payment }}元</p>

          <p>含税金额:{{ form.money_bill }}</p>
          <p>预支付金额: <span style="color:red">{{ form.pay_money }}</span>元</p>
          <p>油气金额:{{ form.oil_money }}元</p>
          <p>
            实结金额:
            <span class="colorRed">{{ reality }}</span> 元
          </p>
        </div>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span class="headerTitle">银行信息</span>
        </div>
        <div class="content">
          <p>{{ form.area == 0 ? '中原银行' : (form.area == 2 ? '兴业银行' : '银行') }}:{{ form.zh }}</p>
          <p>
            账户余额:
            <span class="colorRed">{{ form.money }}</span>
            元
          </p>
          <el-divider></el-divider>
          <p>司机卡号:{{ form.nhk }}</p>
          <p>姓名:{{ form.nhxm }}</p>
          <p>开户行:{{ form.nhkhh }}</p>
        </div>
      </el-card>
    </div>
    <el-form class="passForm" label-position="top" label-width="80px" :model="formLabelAlign">
      <el-form-item :label="Number(form.first_payment).toFixed(2) > 0 ? '剩余支付金额(元)' : '请输入支付金额(元):'">
        <el-input-number v-model="reality" controls-position="right"
          :disabled="Number(form.pay_money) > 0 || Number(form.first_payment) > 0" @change="inputNmuberhandleChange"
          :min="1" :max="reality_show"></el-input-number>
      </el-form-item>
      <el-form-item label="请输入支付密码:">
        <el-input type="password" v-model="formLabelAlign.pass"></el-input>
      </el-form-item>
      <el-form-item class="passBtn">
        <el-button class="btn" type="primary" @click="surePay">确认支付</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
// import { payBill, payAhBill } from "@/api/payManage";
import { firstPayment, payment } from '@/api/moneyManagment';
export default {
  name: "orderSettlement",
  props: {
    settlementInfo: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      form: {},
      formLabelAlign: {
        pass: ""
      },
      reality_show: 0,
      reality: 0,

      validateSure: true,//如果姓名大于等于4,提醒一下是否正确,只提醒一次,提醒过后改成false
    };
  },
  mounted() {
    this.form = this.settlementInfo;
    console.log(" this.form123123123123", this.form);
    let { is_first_payment, first_payment, real_money, zyf } = this.form;
    if (is_first_payment == 0) {
      //if (false) {
      console.log(Number(Number(real_money).toFixed(2)));
      this.reality = Number(Number(real_money).toFixed(2));
      this.reality_show = this.reality;
      console.log("this.reality", this.reality);
    } else {
      this.reality_show = Number((Number(zyf).toFixed(2) - Number(first_payment).toFixed(2)).toFixed(2));
      this.reality = this.reality_show;
      console.log(this.reality, "this.reality2", is_first_payment);
    }
  },
  methods: {
    async surePay() {

      if (!this.reality) {
        this.$message.error("请输入支付金额");
        return;
      }
      if (!this.formLabelAlign.pass) {
        this.$message.error("请输入支付密码");
        return;
      }

      if (this.validateSure && this.form.nhxm.length >= 4) {
        this.$message.error("请确认银行信息的姓名,如果无误请再次点击确认支付!");
        this.validateSure = false;
        return
      }

      const loading = this.$loading({
        lock: true,
        text: "Loading...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.5)",
        customClass: "loadingCss"
      });
      // let options = {
      //   yund_id: this.form.yund_id,
      //   zyf: this.reality,
      //   type: 1,
      //   pwd: this.formLabelAlign.pass,
      //   id: this.form.sj_id,
      //   shkg: this.form.shkg,
      //   shd: this.form.shd,
      //   fhd: this.form.fhd,
      // };
      // console.log("options", options);
      // return;
      let result;
      // if (this.form.area == 0) {
      //   result = await payBill(options);
      // }
      if (this.form.area == 0) {
        // console.log(this.form, "this.form");
        // result = await payAhBill(options);
        if (this.reality === this.reality_show) {
          let options = {
            id: this.form.user_id,
            yund_id: this.form.yund_id,
            yfdj: this.form.yfdj,
            zyf: this.form.zyf,
            pwd: this.formLabelAlign.pass,
            shkg: this.form.shkg,
            shd: this.form.shd,
            fhd: this.form.fhd,
            type: 1,
          };
          console.log('走全量支付');
          result = await payment(options)
        } else {
          // console.log(this.reality, this.reality_show);

          let options = {
            id: this.form.user_id,
            yund_id: this.form.yund_id,
            yfdj: this.form.yfdj,
            zyf: this.form.zyf,
            pwd: this.formLabelAlign.pass,
            shkg: this.form.shkg,
            shd: this.form.shd,
            fhd: this.form.fhd,
            money: this.reality,
            type: 1,
          };
          console.log('走第一次支付');
          result = await firstPayment(options);
        }

      }
      loading.close();
      if (result && result.code == 200) {
        this.$message.success("支付成功");
        setTimeout(() => {
          this.$emit("closeDialog");
        }, 500);
      } else {
        this.$message.error(result.msg ? result.msg : '支付失败');
      }
    },
    inputNmuberhandleChange(value) {
      if (value) {
        this.reality = Number((this.reality).toFixed(2));
        console.log('执行', this.reality);

      }
    }
  }
};
</script>

<style lang="scss">
.orderSettlement {
  .main {
    // background: pink;
    margin: 0 auto;
    width: 80%;
    display: flex;
    justify-content: space-between;
  }

  .passForm {
    margin: 30px auto;

    width: 30%;

    .passBtn {
      .btn {
        width: 100px;
      }

      .el-form-item__content {
        display: flex;
        justify-content: center;
      }
    }

    .el-input-number {
      width: 100%;

      .el-input-number__decrease {
        display: none;
      }

      .el-input-number__increase {
        display: none;
      }

      .el-input__inner {
        text-align: left;
      }
    }


  }

  .box-card {
    width: 48%;
    // margin-right: 20px;
    display: inline-block;

    .headerTitle {
      font-weight: bold;
      font-size: 16px;
    }

    .content {
      p {
        margin-bottom: 18px;

        .colorRed {
          color: $theme-Danger;
        }
      }
    }
  }
}
</style>
